<template>
	<view class="pages">
		<CustomNav :isBack="false" :topBgColor="topBgColor" :title="title" color="#000"></CustomNav>
		<view class="info-block">
			<view class="price-block">
				<view class="price-warning">
					<image src="/static/image/warning.png" class="warning-icon"></image>
					<text>请务必与司机当面确认本次车费金额后再完成支付</text>
				</view>
				<view class="price-title">请输入和司机确认后的金额：</view>
				<view class="price-item" :style="{color:form.price?'rgba(0,0,0,0.9)':'#ccc'}" >
					￥<div @click.stop="handleOpenKeybord" class="price-ctrl" style="flex-grow: 1;">
						{{form.price||'0.00'}}
					</div>
				</view>
			</view>
			<view class="btn normal" @click="payment">立即支付</view>
			<view class="driver-block">
				<view class="driver-info">
					<view class="driver-title">
						<view class="line"></view>
						<view class="title">司机信息</view>
					</view>
					<view class="driver-item">姓名：{{info1.name}}</view>
					<view class="driver-item">性别：{{info1.sex}}</view>
					<view class="driver-item">联系方式：{{maskedPhone}}</view>
					<view class="driver-item">司机评分：{{info1.evaluate}}</view>
				</view>
				<image :src="cloudStorage + info1.avatar" class="driver-img" mode="aspectFill"></image>
			</view>
			<view class="car-block">
				<view class="car-title">
					<view class="line"></view>
					<view class="title">车辆信息</view>
				</view>
				<view class="car-item company">
					<text class="label">所属公司：</text>
					<text class="value">{{info1.company}}</text>
				</view>
				<view class="car-item plate">
					<text class="label">车牌号：</text>
					<text class="value">{{info1.carNo}}</text>
				</view>
			</view>
			<view class="info-block-evaluate">
				<view class="title-item">
					<view class="line"></view>
					<view class="title">满意度评价</view>
				</view>
				<view class="menu-block">
					<view class="menu-item" :class="menuTab==1?'active' :''" @click="menuTab=1">
						<image src="/static/image/satisfied.png" class="satisfied"></image>
						<view class="menu-name">满意</view>
					</view>
					<view class="menu-item" :class="menuTab==2?'active' :''" @click="menuTab=2">
						<image src="/static/image/dissatisfied.png" class="satisfied"></image>
						<view class="menu-name">不满意</view>
					</view>
				</view>
				<view class="rate-item">
					<view class="rate-info">
						<view class="rate-name">车辆整洁干净</view>
						<uni-rate :value="info.cleanId" color="#d8d8d8" active-color="#ff9a00" size="26"
							@change="onChange" />
					</view>
					<view class="rate-text" v-if="info.cleanId==1">很差</view>
					<view class="rate-text" v-else-if="info.cleanId==2">较差</view>
					<view class="rate-text" v-else-if="info.cleanId==3">一般</view>
					<view class="rate-text" v-else-if="info.cleanId==4">满意</view>
					<view class="rate-text" v-else-if="info.cleanId==5">超赞</view>
				</view>
				<view class="rate-item">
					<view class="rate-info">
						<view class="rate-name">司机状态友好</view>
						<uni-rate :value="info.state" color="#d8d8d8" active-color="#ff9a00" size="26"
							@change="onChange1" />
					</view>
					<view class="rate-text" v-if="info.state==1">很差</view>
					<view class="rate-text" v-else-if="info.state==2">较差</view>
					<view class="rate-text" v-else-if="info.state==3">一般</view>
					<view class="rate-text" v-else-if="info.state==4">满意</view>
					<view class="rate-text" v-else-if="info.state==5">超赞</view>
				</view>
				<view class="rate-item">
					<view class="rate-info">
						<view class="rate-name">安全愉快到达</view>
						<uni-rate :value="info.secure" color="#d8d8d8" active-color="#ff9a00" size="26"
							@change="onChange2" />
					</view>
					<view class="rate-text" v-if="info.secure==1">很差</view>
					<view class="rate-text" v-else-if="info.secure==2">较差</view>
					<view class="rate-text" v-else-if="info.secure==3">一般</view>
					<view class="rate-text" v-else-if="info.secure==4">满意</view>
					<view class="rate-text" v-else-if="info.secure==5">超赞</view>
				</view>
			</view>
			<view class="info-block-evaluate" v-if="menuTab==2">
				<view class="title-item">
					<view class="line"></view>
					<view class="title">我要投诉/意见建议</view>
				</view>
				<view class="tips-block">
					<view class="tips-item" v-for="(item, index) in tipsList" :key="index"
						:class="{'active': tipsTab === item.dict_value}" @click="selectTip(item.dict_value)">
						{{ item.dict_label }}
					</view>
				</view>
				<textarea v-model="info.content" placeholder="请输入意见或建议..." class="form-crl"
					placeholder-class="price-crl"></textarea>
				<view class="text">上传文件（可上传图片、视频等佐证材料）</view>
				<view class="upload-item">
					<view v-for="(item, index) in info.imgList" :key="index" class="image-item">
						<view>
							<video v-if="item.includes('.mp4')" :src="item" class="img"></video>
							<image mode="aspectFit" :src="cloudStorage + item" @click="previewImg(item)" v-else
								class="img"></image>
						</view>
						<view @click.stop="closeImg(index)" style="display: inline;">
							<view class="iconfont">
								<image src="/static/image/delete.png" class="delete"></image>
							</view>
						</view>
					</view>
					<view class="upload-content" v-if="info.imgList.length < 9" @click="openShow">
						<image src="/static/image/upload.png" class="upload-img"></image>
					</view>
				</view>
			</view>
			<view class="btn normal" @click="submit">提交</view>
			<view class="prompt-block">
				<view class="prompt-title">温馨提示</view>
				<view class="prompt-content">对出租车强行载客、拒载、不打表等违规运营行为可进行投诉举报。经查证属实后将全额退还乘车费用，欢迎广大
					乘客举报监督。</view>
				<view class="prompt-item">
					<view class="time">投诉电话：0937-12328</view>
					<view class="iconfont icon-a-226dianhuabodatonghua" @click="call('0937-12328')"></view>
				</view>
			</view>
			<view class="bottom-block">
				<view class="bottom-content">
					<view class="bottom-title">人人都是营商环境，个个都是开放形象</view>
					<view class="image-grid">
						<view class="image-item" v-for="(item, index) in bottomItems" :key="index"
							@click="handleBottomClick(item)">
							<image :src="item.image" mode="aspectFill" class="circle-image"></image>
							<view class="image-caption">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<lzcKeyboard ref="lzcKeyboard" @change="priceChange" @confirm="payment" :defaultValue="form.price">
			</lzcKeyboard>
		</view>
	</view>
</template>

<script>
	import {
		getOpenIdApi as wechatGetOpenId
	} from '@/api/wechat.js'
	import {
		getOpenIdApi as alipayGetOpenId
	} from '@/api/alipay.js'
	import {
		getMerchantInfo
	} from '@/api/merchant.js'
	import {
		validate
	} from '@/util/validate.js';
	import {
		getPayApi
	} from '@/api/pay.js'
	import {
		complaintApi,
		getDicByCode
	} from '@/api/complaints.js'
	import CryptoJS from 'crypto-js';
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		agentUtils
	} from '@/util/agent';
	import {
		setStorage,
		getStorage
	} from "@/util/auth";
	import {
		translateGender
	} from '@/util/util';
	import {
		Decrypt
	} from '../../js_sdk/cainiao-crypto/cainiao-crypto';
	import lzcKeyboard from '@/components/lzc-keyboard/lzc-keyboard.vue';
	export default {
		components: {
			lzcKeyboard,
		},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				title: '',
				info1: {
					avatar: '',
					name: '',
					sex: '',
					phone: '',
					evaluate: '',
					company: '',
					carNo: ''
				},
				form: {
					price: ''
				},
				rule: {
					price: {
						//Todo
						name: '金额',
						required: true,
					},
				},
				menuTab: 1,
				info: {
					cleanId: 4,
					state: 4,
					secure: 4,
					content: '',
					imgList: [],
					type: '',
				},
				rule1: {
					type: {
						name: '投诉类型',
						required: true,
					},
					content: {
						name: '投诉内容',
						required: true,
					},
				},
				merchantNo: '',
				sign: '',
				tipsList: [],
				bottomItems: [{
						image: '/static/image/scenery.png',
						title: '肃州风光',
						path: '/pages/scenery/index'
					},
					{
						image: '/static/image/food.png',
						title: '肃州美食',
						path: '/pages/food/index'
					},
					{
						image: '/static/image/hotel.png',
						title: '肃州酒店',
						path: '/pages/hotel/index'
					},
					{
						image: '/static/image/investment.png',
						title: '招商引资',
						path: '/pages/investment/index'
					}
				],
				tipsTab: 1
			}
		},
		computed: {
			maskedPhone() {
				if (!this.info1.phone) return '';
				const phone = this.info1.phone.toString();
				if (phone.length !== 11) return phone;
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
		},
		watch: {
			menuTab() {
				this.info.content = ''
				this.info.imgList = []
				this.info.type = ''
				this.tipsTab = 0
			}
		},
		methods: {
			priceChange(value) {
				// 处理小数点后连续输入0的情况
				
				this.form.price = value;
			},
			handleHideKeybord() {
				this.$refs.lzcKeyboard.hide()
			},
			handleOpenKeybord() {
				this.$refs.lzcKeyboard.open()
			},
			onChange(e) {
				this.info.cleanId = e.value
			},
			onChange1(e) {
				this.info.state = e.value
			},
			onChange2(e) {
				this.info.secure = e.value
			},
			genSign(merchantNo) {
				// 获取当前时间，转换为分钟
				var currentTime = Math.floor(Date.now() / (3 * 60 * 1000)); // 时间戳转换为分钟
				// 构造待加密的字符串
				var dataToSign = merchantNo + currentTime;
				// 计算 MD5 值
				return CryptoJS.MD5(dataToSign).toString(CryptoJS.enc.Hex);
			},
			payment(value) {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					getPayApi({
						merchantNo: this.merchantNo,
						amount: this.form.price,
						sign: this.genSign(this.merchantNo)
					}).then((res) => {
						uni.hideLoading();
						window.location.href = res;

					})
				}
			},

			//通过商户merchantno获取信息
			handleParams(e) {
				const urlParams = new URLSearchParams(window.location.search);
				const param = urlParams.get('sign');
				if (!param) {
					uni.redirectTo({
						url: '/pages/error/error?type=invalid_link'
					});
					return;
				}

				try {
					//解密
					const mi = Decrypt(param)
					// 从解密后的字符串中提取merchantNo的值
					const match = mi.replaceAll('merchantNo=', '');
					if (match) {
						this.merchantNo = match;
						this.initMerchant();
					} else {
						uni.redirectTo({
							url: '/pages/error/error?type=invalid_sign'
						});
					}
				} catch (error) {
					uni.redirectTo({
						url: '/pages/error/error?type=invalid_sign'
					});
				}
			},
			initMerchant() {
				uni.showLoading({
					title: '正在获取参数',
					mask: true
				})
				getMerchantInfo({
					merchantNo: this.merchantNo
				}).then(res => {
					this.title = "付款给-" + res.carNo
					this.info1 = {
						avatar: res.avatar ||
							'https://suzhouqu-taxi-1306862033.cos.ap-chengdu.myqcloud.com/pic/20250415162907.png',
						name: res.name,
						sex: translateGender(res.sex),
						phone: res.phone,
						evaluate: res.evaluate?.toString() || '9.9',
						company: res.company,
						carNo: res.carNo
					}
				}).catch(error => {
					if (error.statusCode === 404) {
						uni.redirectTo({
							url: '/pages/error/error?type=expired_link'
						});
					} else if (error.statusCode >= 500) {
						uni.redirectTo({
							url: '/pages/error/error?type=server_error'
						});
					} else {
						uni.redirectTo({
							url: '/pages/error/error?type=network_error'
						});
					}
				});
			},

			// 点击选择类型
			selectTip(value) {
				this.tipsTab = value; // 更新高亮状态
				this.info.type = value; // 赋值给表单
			},
			submit() {
				let files = ''
				if (this.info.imgList.length > 0) {
					files = this.info.imgList.join(',')
				}

				if (this.menuTab == 2) {
					if (validate(this.info, this.rule1)) {
						uni.showLoading({
							title: '提交中...',
							mask: true
						});
						complaintApi({
							complaints: this.info.content,
							files: files,
							merchantId: this.merchantNo,
							type: this.info.type,
							driverFriendlyRating: this.info.state,
							safeAndPunctualRating: this.info.secure,
							vehicleCleanlinessRating: this.info.cleanId
						}).then((res) => {
							uni.hideLoading();
							this.showToast('提交成功')
						}).finally(() => {
							this.info.content = ''
							this.info.type = ''
							this.info.state = ''
							this.info.secure = ''
							this.info.cleanId = ''
							this.info.imgList = []
						})
					}
				} else {
					uni.showLoading({
						title: '提交中...',
						mask: true
					});
					complaintApi({
						complaints: this.info.content,
						files: files,
						merchantId: this.merchantNo,
						type: this.info.type,
						driverFriendlyRating: this.info.state,
						safeAndPunctualRating: this.info.secure,
						vehicleCleanlinessRating: this.info.cleanId
					}).then((res) => {
						uni.hideLoading();
						this.showToast('提交成功')
					})
				}
			},
			getType() {
				getDicByCode({
					code: 'feedback_type'
				}).then((res) => {
					this.tipsList = res
				})
			},
			handleBottomClick(item) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					})
				}
			},
			// 打开上传面板
			openShow() {
				// 这里可以调用 uni.chooseImage / uni.chooseFile 或其他上传逻辑
				uni.chooseFile({
					count: 9 - this.info.imgList.length,
					type: 'all',
					success: (res) => {
						let file = res.tempFiles[0].path
						uploadFile(file).then((res) => {
							this.info.imgList.push(res);
						});
					}
				})
			},

			// 预览图片
			previewImg(url) {
				uni.previewImage({
					urls: this.info.imgList.filter(item => !item.includes('.mp4')).map(item => this.cloudStorage +
						item),
					current: this.cloudStorage + url,
				});
			},

			// 打开文件（非图片）
			openFile(url) {
				uni.downloadFile({
					url: this.cloudStorage + url,
					success: (res) => {
						const filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							fileType: "pdf", // 根据实际文件类型调整
							success: () => console.log("打开文件成功"),
							fail: (err) => console.error("打开文件失败", err),
						});
					},
				});
			},

			// 删除文件
			closeImg(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前文件',
					success: function(res) {
						if (res.confirm) {
							that.info.imgList.splice(index, 1);
						}
					}
				});
			},

			//差异化授权登录处理
			checkAuth() {
				const platform = agentUtils.checkPlatform();
				if (!['alipay', 'wechat'].includes(platform)) {
					uni.redirectTo({
						url: '/pages/error/error?type=invalid_platform'
					});
					return;
				}

				if (platform === 'wechat') {
					// 微信公众号静默授权 获取openid
					this.wechatAuth()
				} else {
					// 支付宝静默授权
					this.alipayAuth()
				}
			},

			// 微信公众号静默授权 获取openid
			wechatAuth() {
				if (!agentUtils.isWechatBrowser()) {
					this.showToast('请在微信客户端打开')
					return;
				}

				/*const {
					code
				} = this.$route.query*/
				const urlParams = new URLSearchParams(window.location.search);
				let code = urlParams.get('code');
				if (!code) {
					agentUtils.silentWechatAuth()
				} else {
					this.handleWechatLogin(code)
				}
			},
			handleWechatLogin(code) {
				uni.showLoading({
					title: '登录中...',
					mask: true
				}); // 防止用户操作

				try {
					//Todo
					wechatGetOpenId({
						code: code
					}).then(res => {
						if (!res?.tokenValue || typeof res.tokenValue !== 'string') {
							this.showToast('登录失败，获取的Token不合法')
							return;
						}

						setStorage('token', res.tokenValue, 604800)
					})

					uni.hideLoading();
					//uni.showToast({ title: '登录成功' });

					//this.initUserSession()
				} catch (e) {
					uni.hideLoading();
					this.showToast('登录失败')
				}
			},

			// 支付宝静默授权
			async alipayAuth() {
				if (!agentUtils.isAlipayBrowser()) {
					this.showToast('请在支付宝客户端打开')
					return;
				}

				const urlParams = new URLSearchParams(window.location.search);
				let authCode = urlParams.get('auth_code');
				if (!authCode) {
					agentUtils.silentAlipayAuth()
				} else {
					await this.handleAlipayLogin(authCode)
				}
			},
			handleAlipayLogin(authCode) {
				uni.showLoading({
					title: '登录中...',
					mask: true
				}); // 防止用户操作

				try {
					alipayGetOpenId({
						code: authCode,
						type: 'alipay'
					}).then(res => {
						if (!res?.tokenValue || typeof res.tokenValue !== 'string') {
							this.showToast('登录失败，获取的Token不合法')
							return;
						}

						setStorage('token', res.tokenValue, 604800)
					})

					uni.hideLoading();
					//uni.showToast({ title: '登录成功' });

					//this.initUserSession()
				} catch (e) {
					uni.hideLoading();
					this.showToast('登录失败')
				}
			},
			/*initUserSession() {
				// 后续业务逻辑...
				let token = getStorage('token')
				this.showToast('token1:'+token)
			},*/
		},
		onLoad(e) {
			//检查URL参数中是否包含sign
			const urlParams = new URLSearchParams(window.location.search);
			const sign = urlParams.get('sign');

			if (!sign) {
				// 如果没有sign参数，跳转到错误页面
				uni.redirectTo({
					url: '/pages/error/error?message=无效的访问链接'
				});
				return;
			}

			//解析参数、调用商家信息接口
			this.handleParams(e)

			//获取评价类型
			this.getType()

			//启动微信授权流程
			//this.checkWechatAuth()

			//启动静默授权流程
			// this.checkAuth()
			//this.genSign(this.merchantNo)
		},
		onShow(e) {

			if (!getStorage('token')) {

				//防止重复授权

				//启动微信授权流程
				//this.checkWechatAuth()
				//启动授权流程
				this.checkAuth()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #fff;

		.info-block {
			padding: 30rpx;
			margin-top: 110rpx;
			background-color: #F7F6F9;

			.driver-block {
				background-color: #3175ff;
				padding: 30rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 30rpx;
				.driver-info {
					color: #fff;

					.driver-title {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.line {
							width: 16rpx;
							height: 34rpx;
							background: #fff;
							border-radius: 30rpx;
							margin-right: 14rpx;
						}

						.title {
							font-size: 32rpx;
							font-weight: bold;
						}
					}

					.driver-item {
						line-height: 70rpx;
						font-size: 30rpx
					}
				}

				.driver-img {
					width: 160rpx;
					height: 210rpx;
					background-color: #F7F6F9;
					border-radius: 20rpx;
				}
			}

			.car-block {
				background-color: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin-top: 30rpx;

				.car-title {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.line {
						width: 16rpx;
						height: 34rpx;
						background: #3175ff;
						border-radius: 30rpx;
						margin-right: 14rpx;
					}

					.title {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.car-item {
					line-height: 66rpx;
					font-size: 30rpx;
					display: flex;
					align-items: flex-start;
				}

				.company {
					line-height: 40rpx;
					padding: 10rpx 0;
					min-height: 80rpx;
					margin-bottom: 20rpx;
				}

				.plate {
					margin-top: 20rpx;
				}

				.label {
					white-space: nowrap;
					margin-right: 10rpx;
					width: 140rpx;
				}

				.value {
					flex: 1;
					word-break: break-all;
				}
			}
		}

		.price-block {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.price-warning {
				display: flex;
				align-items: center;
				background-color: #FFF8E6;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.warning-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

				text {
					color: #FF9A00;
					font-size: 26rpx;
					font-weight: 500;
				}
			}

			.price-title {
				margin-bottom: 30rpx;
				font-size: 32rpx;
			}

			.price-item {
				display: flex;
				font-size: 88rpx;
				font-weight: bold;


				.price-crl {
					font-size: 88rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}
		}

		.btn {
			width: 100%;
			margin: 0 auto;
			border-radius: 20rpx;
			height: 100rpx;
			margin-top: 30rpx;
		}

		.info-block-evaluate {
			background-color: #fff;
			width: 100%;
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;

			.title-item {
				display: flex;
				align-items: center;

				.line {
					width: 18rpx;
					height: 40rpx;
					border-radius: 60rpx;
					background-color: #3175ff;
					margin-right: 16rpx;
				}

				.title {
					font-weight: bold;
					font-size: 34rpx;
				}
			}

			.menu-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 30rpx;

				.menu-item.active {
					background-color: #fff8e6;
					color: #ff9a00;
				}

				.menu-item {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 14rpx;
					width: calc(50% - 15rpx);
					height: 80rpx;
					background-color: #f5f5f7;
					color: #767676;

					.satisfied {
						width: 50rpx;
						height: 50rpx;
						margin-right: 30rpx;
					}

					.menu-name {
						font-weight: bold;
						font-size: 34rpx;
					}
				}
			}

			.rate-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.rate-info {
					display: flex;
					align-items: center;

					.rate-name {
						margin-right: 10rpx;
						font-size: 30rpx;
					}
				}

				.rate-text {
					display: flex;
					color: #767676;
					font-size: 28rpx;
				}
			}

			.tips-block {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.tips-item.active {
					background-color: #3175ff;
					color: #fff;
				}

				.tips-item {
					background-color: #f5f5f5;
					padding: 10rpx 16rpx;
					font-size: 24rpx;
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
					color: #767676;
				}
			}

			.form-crl {
				background-color: #f5f5f5;
				width: 100%;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.text {
				font-size: 28rpx;
				margin-top: 30rpx;
			}

			.upload-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.image-item {
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					display: flex;
					flex-direction: row;

					.img {
						width: 180rpx;
						height: 200rpx;
						border-radius: 20rpx;
					}

					.name {
						width: 190rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 10rpx;
					}

					.iconfont {
						.delete {
							width: 18px;
							height: 18px;
							position: absolute;
							margin-left: -30rpx;
						}
					}
				}

				.image-item:nth-child(3n) {
					margin-right: 0;
				}

				.delete-item {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.delete {
						width: 20px;
						height: 20px;
						position: absolute;
					}
				}

				.upload-content {
					position: relative;
					background: #F1F1F1;
					border-radius: 10px;
					width: 190rpx;
					height: 220rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;

					.upload-img {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		.prompt-block {
			background-color: #e3e9f9;
			width: 100%;
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;

			.prompt-title {
				text-align: center;
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 20rpx;
			}

			.prompt-content {
				font-size: 30rpx;
				font-weight: bold;
				line-height: 56rpx;
			}

			.prompt-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.time {
					font-size: 30rpx;
					font-weight: bold;
				}

				.iconfont {
					font-size: 40rpx;
					margin-top: 0;
					color: #3175ff;
					background-color: #bfd1fa;
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					font-size: 30rpx;
				}
			}
		}

		.bottom-block {
			background-color: #ffffff;
			padding: 40rpx 30rpx;
			margin-top: 40rpx;
			border-radius: 20rpx;

			.bottom-content {
				display: flex;
				flex-direction: column;
				align-items: center;

				.bottom-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 40rpx;
					text-align: center;
				}

				.image-grid {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					width: 100%;

					.image-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 48%;
						margin-bottom: 30rpx;

						.circle-image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							background-color: #eee;
							margin-bottom: 15rpx;
							box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
						}

						.image-caption {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
							text-align: center;
						}
					}

					.image-item:active {
						transform: scale(0.95);
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>